<template>
  <div class="map" id="map">
  </div>
</template>

<script>
import {onMounted,reactive,inject} from "vue"

export default {
  setup() {
    let $echarts = inject("echarts")
    let $http=inject("axios")

    let mapData = reactive({})
    async function getState() {
      mapData = await $http({ url: "/map/data" });
    }
    onMounted(()=>{
      let myChart = $echarts.init(document.getElementById("map"))
      getState().then(()=>{
        // console.log("map",mapData);
        $echarts.registerMap("china",mapData.data.chinaData)
        myChart.setOption({
          geo:{
            map:"china",
            itemStyle:{
              areaColor:"#0099ff",
              borderColor:"#00ffff",
              shadowColor:"rgba(200,130,70,0.5)",
              shadowBlur:25,
            },
            emphasis:{
                focus:"self"
              }
          },
          //   散点图数据
          tooltip:{
              trigger:"item",
          },
          title:{
              text:"城市销量",
              left:"45%",
              textStyle:{
                color:"#fff",
                fontSize:20,
              }
          },
          // 视觉映射
          visualMap:{
              type:"continuous",
              min:100,
              max:5000,
              calculable:true,
              inRange:{
                  color:["#50a3ba","#eac736","#d94e5d"],
              },
              textStyle:{
                  color:"#fff"
              }  
          },
          series: [
            {
              type: "scatter",
              itemStyle: {
                color: "red",
              },
              // 更改坐标维度
              encode:{
                tooltip: 2
              },
              coordinateSystem:"geo",
              data: [
                { name: "北京", value: [116.46, 39.92, 4367] },
                { name: "上海", value: [121.48, 31.22, 8675] },
                { name: "深圳", value: [114.07, 22.62, 2461] },
                { name: "广州", value: [113.23, 23.16, 187] },
                { name: "西安", value: [108.45, 34, 3421] },
              ]
            }
          ]
        })
      })
    })

    return {
    getState,mapData
  }
  }
}
</script>

<style lang="less" scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>